import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'
import AlertTip from '@/components/alert_tip/alert_tip'
import { is, fromJS } from 'immutable';  // 保证数据的不可变
import QueueAnim from 'rc-queue-anim'
import { saveUserInfo } from '@/store/action'
import { getStore } from '@/utils/commons'
import { getImgPath } from '../../utils/commons'
import API from '../../api/api'
import './profile.scss'

Profile.propTypes = {
  userInfo: PropTypes.object.isRequired,
  saveUserInfo: PropTypes.func.isRequired,
}

const username = '登录/注册'
const mobile = '暂无绑定手机'
const imgpath = ''
const setAlertText = '请在手机APP中打开'


function Profile(props){
  const [newState,setNewState] = useState({})
  const [balance,setBalance] = useState(0)
  const [count,setCount] = useState(0)
  const [pointNumber,setPointNumber] = useState(0)
  const [hasAlert,setHasAlert] = useState('')
  const [alertText,setAlertText] = useState('请在手机APP中打开')
  
  function initData(){
    console.log('props',props)
    if (props.userInfo && props.userInfo.user_id) {
      newState.mobile = props.userInfo.mobile || '暂无手机绑定'
      newState.username = props.userInfo.username
      newState.balance = props.userInfo.balance
      newState.count = props.userInfo.gift_amount
      newState.pointNumber = props.userInfo.point
    } else {
      newState.mobile = '暂无手机绑定'
      newState.username = '登录/注册'
    }
    setNewState(newState)
  }

  function handleClick(type){
    switch (type) {
      case 'download':
        alertText = '请到官方网站下载'
        break
      case 'unfinished':
        alertText = '功能尚未开发'
        break
      default:
    }
    setHasAlert(hasAlert)
    setAlertText(alertText)
  }
  // 获取用户信息
  async function getUserInfo() {
    let userInfo = await API.getUser({ user_id: getStore('user_id') })
    userInfo.imgpath = userInfo.avatar.indexOf('/') !== -1 ? '/img/' + userInfo.avatar : getImgPath()
    console.log('userInfo',userInfo)
    props.saveUserInfo(userInfo)
    initData()
  }
  function goBack() {
    props.history.goBack()
  }
  useEffect(()=>{
    if (!props.userInfo.user_id) {
      getUserInfo()
    } else {
      initData()
    }
  },[])
  
  return (
    <div className='profile-container'>
      <QueueAnim type='bottom'>
        <Header title="我的" goBack={goBack} key='s1' />
        <section key='s2'>
          <section className='profile-number' >
            <Link to={props.userInfo && props.userInfo.user_id ? '/info' : '/login'} className='profile-link'>
              <img src={imgpath} alt='img is wrong' className='private-image' />
              <div className='user-info'>
                <div>{username}</div>
                <div>
                  <div className='icon-tel'></div>
                  <span className='icon-mobile-number'>{mobile}</span>
                </div>
              </div>
              <div className='icon-arrow-right'>
              </div>
            </Link>
          </section>
          <section className='info-data' key='i1'>
            <ul className='clear'>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{parseInt(balance).toFixed(2)}</b>元</span>
                <span className='info-data-bottom'>我的余额</span>
              </Link>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{count}</b>个</span>
                <span className='info-data-bottom'>我的优惠</span>
              </Link>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{pointNumber}</b>分</span>
                <span className='info-data-bottom'>我的积分</span>
              </Link>
            </ul>
          </section>
          <section className='profile-list'>
            <QueueAnim deley='0.4'>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i2'>
                <div className='icon-dingdan order-icon'></div>
                <div className='myorder-text'>
                  <span>我的订单</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <a href="https://home.m.duiba.com.cn/#/chome/index" className='myorder' key='i3'>
                <div className='icon-jifen1 order-icon'></div>
                <div className='myorder-text'>
                  <span>积分商城</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </a>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i4' >
                <div className='icon-huangguan order-icon'></div>
                <div className='myorder-text'>
                  <span>饿了么会员卡</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i5'>
                <div className='icon-yk_fangkuai_fill order-icon'></div>
                <div className='myorder-text'>
                  <span>服务中心</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <div onClick={handleClick.bind(this, 'download')} className='myorder' key='i6'>
                <div className='icon-changyonglogo40 order-icon'></div>
                <div className='myorder-text'>
                  <span>下载饿了么APP</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
            </QueueAnim>
          </section>
        </section>
        <Footer key='s3' />
      </QueueAnim>
      {hasAlert && <AlertTip logout={() => { return false }} closeTip={handleClick} alertText={alertText} />}
    </div>
  )
}


const mapDispatchToProps = (dispatch) => {
  console.log("dispatch",dispatch)
  return {
    saveUserInfo: (userInfo) => dispatch(saveUserInfo(userInfo))
  }
}

const mapStateToProps = (state) => {
  console.log("state1",state)
  console.log("state2",state.userInfo)
  return {
    userInfo: state.userInfo
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Profile)